/**
* 功能描述: 基础单选按钮组样式Demo
* @author 赵常畅
* @date 2022/9/21 19:34
* @version 1.0
*/
<template>
  <div class="yw-radio-button-group">
    <label class="yw-radio-button-wrapper yw-radio-button-wrapper-checked">
      <span class="yw-radio-button">
        <input type="radio" class="yw-radio-button-input" value="a">
        <span class="yw-radio-button-inner"></span>
      </span>
      <span>Hangzhou</span>
    </label>
    <label class="yw-radio-button-wrapper">
      <span class="yw-radio-button">
        <input type="radio" class="yw-radio-button-input" value="b">
        <span class="yw-radio-button-inner"></span>
      </span>
      <span>Shanghai</span>
    </label>
    <label class="yw-radio-button-wrapper">
      <span class="yw-radio-button">
        <input type="radio" class="yw-radio-button-input" value="c">
        <span class="yw-radio-button-inner"></span>
      </span>
      <span>Beijing</span>
    </label>
    <label class="yw-radio-button-wrapper">
      <span class="yw-radio-button">
        <input type="radio" class="yw-radio-button-input" value="d">
        <span class="yw-radio-button-inner"></span>
      </span><span>Chengdu</span>
    </label>
  </div>
  <div class="yw-radio-button-group">
    <label class="yw-radio-button-wrapper yw-radio-button-wrapper-checked"><span class="yw-radio-button yw-radio-button-checked"><input type="radio" class="yw-radio-button-input" value="a">
      <span class="yw-radio-button-inner"></span>
    </span>
      <span>Hangzhou</span>
    </label>
    <label class="yw-radio-button-wrapper yw-radio-button-wrapper-disabled">
      <span class="yw-radio-button">
        <input type="radio" disabled="" class="yw-radio-button-input" value="b">
        <span class="yw-radio-button-inner"></span>
      </span>
      <span>Shanghai</span>
    </label>
    <label class="yw-radio-button-wrapper">
      <span class="yw-radio-button">
        <input type="radio" class="yw-radio-button-input" value="c">
        <span class="yw-radio-button-inner"></span>
      </span><span>Beijing</span>
    </label>
    <label class="yw-radio-button-wrapper">
      <span class="yw-radio-button">
        <input type="radio" class="yw-radio-button-input" value="d">
        <span class="yw-radio-button-inner"></span>
      </span>
      <span>Chengdu</span>
    </label>
  </div>
  <div class="yw-radio-button-group">
    <label class="yw-radio-button-wrapper yw-radio-button-wrapper-checked yw-radio-button-wrapper-disabled"><span class="yw-radio-button yw-radio-button-checked">
      <input type="radio" disabled="" class="yw-radio-button-input" value="a">
      <span class="yw-radio-button-inner"></span>
    </span>
      <span>Hangzhou</span>
    </label>
    <label class="yw-radio-button-wrapper yw-radio-button-wrapper-disabled">
      <span class="yw-radio-button">
        <input type="radio" disabled="" class="yw-radio-button-input" value="b">
        <span class="yw-radio-button-inner"></span>
      </span><span>Shanghai</span>
    </label>
    <label class="yw-radio-button-wrapper yw-radio-button-wrapper-disabled">
      <span class="yw-radio-button">
        <input type="radio" disabled="" class="yw-radio-button-input" value="c">
        <span class="yw-radio-button-inner"></span>
      </span>
      <span>Beijing</span>
    </label>
    <label class="yw-radio-button-wrapper yw-radio-button-wrapper-disabled">
      <span class="yw-radio-button">
        <input type="radio" disabled="" class="yw-radio-button-input" value="d">
        <span class="yw-radio-button-inner"></span>
      </span>
      <span>Chengdu</span>
    </label>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>
.yw-radio-button-group {
  margin: 10px;
}
</style>
